<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
    <title>{:lang('Sign up')}</title>
    <script src="__STATIC__/hybit/js/rem.js"></script>
    <link rel="stylesheet" href="__STATIC__/hybit/css/myCommon.css">
    <if cookie('think_var') == 'en-us'>
        <link rel="stylesheet" href="__STATIC__/hybit/css/style_en.css">
    <else/>
        <link rel="stylesheet" href="__STATIC__/hybit/css/style.css">
    </if>
    <link rel="stylesheet" href="__STATIC__/hybit/css/iosSelect.css">
</head>
<body style="min-height: calc(100vh - 0.8rem);background: #1f1e24;">
    <div class="head">
       <a href="javascript:history.back(-1)"><img src="__STATIC__/hybit/images/headleft.png" alt=""></a>
       <p>{:lang('Sign up')}</p>
    </div>
    <h3 class="mytitle" style="margin-top: 0.8rem;">{:lang('Sign up')}</h3>
    <form method="post" action="" class="layui-form">
        <div class="loginbg">
            <!-- <div class="inputbgbg" id="select_contact">
               <input type="text"  class="inputshow" name="area" id="contact_city_code" value="" data-city-name="">
               <p id="show_contact"><span>请选择城市区域</span></p>
               <img src="__STATIC__/hybit/images/rightdown.png" alt="">
            </div> -->
            <input type="text" class="inputshow" name="username" placeholder="{:lang('Your Email or Phone Number')}">
            <div class="inputshow1">
                <input type="text" name="code" placeholder="{:lang('Please enter code')}">
                <button type="button" class="yanzheng">{:lang('Get code')}</button>
            </div>
            <input type="text" class="inputshow" name="password" placeholder="{:lang('Password')}">
            <input type="text" class="inputshow" name="confirm_password" placeholder="{:lang('Comfirm password')}">
            <input type="text" class="inputshow" name="recommender_code" value="{:input('recommender_code')}" placeholder="{:lang('Invitation code')}({:lang('required')})">
            <div class="inputshow1 inputshow2">
                <input type="text" name="captcha" placeholder="{:lang('Please input the graphic verification code')}">
                <captcha height="30" width="100" font-size="14" style="cursor: pointer;width:2.1rem;height:0.7rem;"/>
            </div>
            <label class="registercheck">
                <input type="checkbox" id="check">
                <p>{:lang('I agree to the')}<a href="{:url('user/register/text',array('text'=>'zcxy'))}">《{:lang('Sign up Agreement')}》</a>{:lang('and')}<a href="{:url('user/register/text',array('text'=>'yszc'))}">《{:lang('Privacy Policy')}》</a></p>
            </label>
            <button type="button" class="loginbtn" lay-submit>{:lang('Sign up')}</button>
            <a href="{:url('user/login/index')}" class="goregister">{:lang('Login')}</a>
        </div>
    </form>
    <script src="__STATIC__/js/jquery.js"></script>
    <script src="__STATIC__/hybit/js/zepto.js"></script>
    <script src="__STATIC__/hybit/js/areaData_v2.js"></script>
    <script src="__STATIC__/hybit/js/iosSelect.js"></script>
    <script src="__STATIC__/layui/layui.js"></script>
    <script type="text/javascript">
    layui.use(['layer','form'],function(){
        var layer = layui.layer,
            form = layui.form;

        $('.yanzheng').click(function(){
            var username = $('input[name=username]').val();
            var obj = $(this);
            $(obj).attr('disabled', true);
            $.ajax({
                type: 'get',
                url: '{:url("user/VerificationCode/send")}',
                data: {username:username},
                success:function(res){
                    layer.msg(res.msg)
                    if(res.code == 1){
                        let count = 60;
                        const countDown = setInterval(() => {
                        if (count === 0) {
                        $(obj).text('{:lang("Resend")}').removeAttr('disabled');
                        clearInterval(countDown);
                        } else {
                           $(obj).text(count + 's');
                        }
                        count--;
                        }, 1000);
                    }else{
                        $(obj).text('{:lang("Resend")}').removeAttr('disabled');
                    }
                }
            });
        });

        //监听提交
        form.on('submit', function(data){
            var _this = $(this);
            var check = $('#check').is(':checked');
            if(check != true){
                layer.msg('{:lang("Please check the registration agreement and privacy policy!")}');
                return false;
            }
            _this.attr("disabled",true);
            $.ajax({
                type: 'post',
                url: '{:url("user/Register/doRegister")}',
                data: data.field,
                success:function(res){
                    var recommender_code = "{:input('recommender_code')}";
                    layer.msg(res.msg)
                    if(res.code == 1){
                        if(recommender_code){
                            setTimeout(function(){ window.location.href="https://www.becoinapp.com/app/"; }, 1500);
                        }else{
                            setTimeout(function(){ location.reload(); }, 1500);
                        }
                    }else{
                        _this.removeAttr("disabled");
                    }
                }
            });
            return false;
        });
    });
    </script>
    <script type="text/javascript">
    var selectContactDom = $('#select_contact');
    var showContactDom = $('#show_contact');
    var contactProvinceCodeDom = $('#contact_province_code');
    var contactCityCodeDom = $('#contact_city_code');
    selectContactDom.bind('click', function () {
        var sccode = showContactDom.attr('data-city-code');
        var scname = showContactDom.attr('data-city-name');

        var oneLevelId = showContactDom.attr('data-province-code');
        var twoLevelId = showContactDom.attr('data-city-code');
        var threeLevelId = showContactDom.attr('data-district-code');
        var iosSelect = new IosSelect(3, 
            [iosProvinces, iosCitys, iosCountys],
            {
                title: '地址选择',
                itemHeight: 35,
                relation: [1, 1],
                oneLevelId: oneLevelId,
                twoLevelId: twoLevelId,
                threeLevelId: threeLevelId,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                    contactProvinceCodeDom.val(selectOneObj.id); 
                    contactProvinceCodeDom.attr('data-province-name', selectOneObj.value);
                    contactCityCodeDom.val(selectTwoObj.id);
                    contactCityCodeDom.attr('data-city-name', selectTwoObj.value);

                    showContactDom.attr('data-province-code', selectOneObj.id);
                    showContactDom.attr('data-city-code', selectTwoObj.id);
                    showContactDom.attr('data-district-code', selectThreeObj.id);
                    showContactDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
                    contactCityCodeDom.val(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
                }
        });
    });
    </script>
</body>
</html>